<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ElementPlus 组件包装器演示</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="node_modules/vue/dist/vue.global.js"></script>
  <script src="node_modules/element-plus/dist/index.full.js"></script>
    <script src="node_modules/@element-plus/icons-vue/dist/global.iife.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f5f7fa;
      padding: 20px;
      color: #333;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .header h1 {
      color: #409EFF;
      margin-bottom: 10px;
    }
    
    .header p {
      color: #666;
    }
    
    .main-content {
      display: flex;
      gap: 20px;
    }
    
    .sidebar {
      width: 250px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 15px;
    }
    
    .sidebar-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #409EFF;
    }
    
    .component-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .component-category {
      margin-bottom: 15px;
    }
    
    .category-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #606266;
    }
    
    .component-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background-color: #f5f7fa;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .component-item:hover {
      background-color: #ecf5ff;
      color: #409EFF;
    }
    
    .component-icon {
      margin-right: 8px;
      font-size: 16px;
    }
    
    .canvas-container {
      flex: 1;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .canvas-toolbar {
      padding: 10px 15px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #dcdfe6;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .canvas {
      position: relative;
      flex: 1;
      min-height: 600px;
      overflow: auto;
      background-color: #fff;
      background-image: 
        linear-gradient(rgba(200, 200, 200, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 200, 200, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
      transition: background-color 0.3s;
    }
    
    /* 添加对齐辅助线 */
    .alignment-line {
      position: absolute;
      background-color: #409EFF;
      z-index: 9999;
      pointer-events: none;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    
    .alignment-line-h {
      height: 1px;
      left: 0;
      right: 0;
    }
    
    .alignment-line-v {
      width: 1px;
      top: 0;
      bottom: 0;
    }
    
    .property-panel {
      width: 300px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 15px;
    }
    
    .property-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #409EFF;
    }
    
    .property-group {
      margin-bottom: 20px;
    }
    
    .group-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #606266;
      padding-bottom: 5px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .property-row {
      margin-bottom: 10px;
    }
    
    .property-label {
      font-size: 13px;
      color: #606266;
      margin-bottom: 5px;
    }
    
    .event-log {
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      height: 200px;
      overflow-y: auto;
    }
    
    .log-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #409EFF;
    }
    
    .log-entry {
      padding: 5px 0;
      border-bottom: 1px solid #ebeef5;
      font-family: monospace;
      font-size: 13px;
    }
    
    .log-entry:last-child {
      border-bottom: none;
    }
    
    /* 元素包装器样式 - 优化版 */
    .element-wrapper {
      position: absolute;
      box-sizing: border-box;
      transition: all 0.2s ease;
      border-radius: 3px;
    }
    
    .element-wrapper.is-selected {
      border: 1px dashed #409EFF;
      box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
    }
    
    /* 拖拽句柄 - 更紧凑的设计 */
    .element-wrapper-handle {
      position: absolute;
      top: -22px;
      left: 0;
      height: 22px;
      background-color: #409EFF;
      color: #fff;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      cursor: move;
      border-radius: 3px 3px 0 0;
      box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
      opacity: 0.9;
      min-width: 100px;
      max-width: 100%;
      width: auto;
      z-index: 11;
      transform-origin: left bottom;
      transform: scale(0.9);
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    .element-wrapper.is-selected .element-wrapper-handle:hover {
      opacity: 1;
      transform: scale(1);
    }
    
    .element-wrapper-title {
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
    
    .element-wrapper-remove {
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-left: 5px;
      transition: all 0.2s;
    }
    
    .element-wrapper-remove:hover {
      background-color: rgba(255, 255, 255, 0.2);
      color: #f56c6c;
    }
    
    .element-wrapper-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 2px;
    }
    
    /* 缩放控制点 - 更精致的设计 */
    .resize-handle {
      position: absolute;
      width: 7px;
      height: 7px;
      background-color: #fff;
      border: 1px solid #409EFF;
      border-radius: 50%;
      z-index: 10;
      opacity: 0.8;
      transition: all 0.2s;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    }
    
    .resize-handle:hover {
      transform: scale(1.2);
      opacity: 1;
      background-color: #409EFF;
      border-color: #fff;
    }
    
    .resize-nw {
      top: -3px;
      left: -3px;
      cursor: nwse-resize;
    }
    
    .resize-ne {
      top: -3px;
      right: -3px;
      cursor: nesw-resize;
    }
    
    .resize-sw {
      bottom: -3px;
      left: -3px;
      cursor: nesw-resize;
    }
    
    .resize-se {
      bottom: -3px;
      right: -3px;
      cursor: nwse-resize;
    }
    
    /* 添加中间控制点 */
    .resize-n {
      top: -3px;
      left: 50%;
      margin-left: -3px;
      cursor: ns-resize;
    }
    
    .resize-e {
      top: 50%;
      right: -3px;
      margin-top: -3px;
      cursor: ew-resize;
    }
    
    .resize-s {
      bottom: -3px;
      left: 50%;
      margin-left: -3px;
      cursor: ns-resize;
    }
    
    .resize-w {
      top: 50%;
      left: -3px;
      margin-top: -3px;
      cursor: ew-resize;
    }
    
    .component-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: #f5f7fa;
      border: 1px dashed #dcdfe6;
      color: #909399;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <div class="header">
      <h1>ElementPlus 组件包装器演示</h1>
      <p>从左侧拖拽组件到画布，可以自由拖动和调整大小</p>
    </div>
    
    <div class="main-content">
      <div class="sidebar">
        <div class="sidebar-title">组件库</div>
        
        <div class="component-category">
          <div class="category-title">基础组件</div>
          <div class="component-list">
            <div class="component-item" 
                 @click="addComponent('button')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'button')"
                 @dragend="handleComponentDragEnd($event)">
              <i class="el-icon-position component-icon"></i>
              <span>按钮</span>
            </div>
            <div class="component-item" 
                 @click="addComponent('input')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'input')">
              <i class="el-icon-edit component-icon"></i>
              <span>输入框</span>
            </div>
            <div class="component-item" 
                 @click="addComponent('switch')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'switch')">
              <i class="el-icon-open component-icon"></i>
              <span>开关</span>
            </div>
            <div class="component-item" 
                 @click="addComponent('slider')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'slider')">
              <i class="el-icon-set-up component-icon"></i>
              <span>滑块</span>
            </div>
          </div>
        </div>
        
        <div class="component-category">
          <div class="category-title">数据展示</div>
          <div class="component-list">
            <div class="component-item" 
                 @click="addComponent('card')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'card')">
              <i class="el-icon-document component-icon"></i>
              <span>卡片</span>
            </div>
            <div class="component-item" 
                 @click="addComponent('progress')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'progress')">
              <i class="el-icon-loading component-icon"></i>
              <span>进度条</span>
            </div>
            <div class="component-item" 
                 @click="addComponent('tag')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'tag')">
              <i class="el-icon-price-tag component-icon"></i>
              <span>标签</span>
            </div>
            <div class="component-item" 
                 @click="addComponent('alert')"
                 draggable="true"
                 @dragstart="handleComponentDragStart($event, 'alert')">
              <i class="el-icon-warning-outline component-icon"></i>
              <span>警告</span>
            </div>
             <div class="component-item" 
                  @click="addComponent('container')"
                  draggable="true"
                  @dragstart="handleComponentDragStart($event, 'container')">
              <i class="el-icon-warning-outline component-icon"></i>
              <span>容器</span>
            </div>
          </div>
           
        </div>
      </div>
      
      <div class="canvas-container">
        <div class="canvas-toolbar">
          <div>
            <el-button size="small" @click="clearCanvas">清空画布</el-button>
            <el-button size="small" type="primary" @click="addDemoComponents">添加示例组件</el-button>
          </div>
          <div>
            <el-tag type="info">组件数: {{ components.length }}</el-tag>
          </div>
        </div>
        
        <div class="canvas" ref="canvas" @click="deselectAll"
             @dragover="handleCanvasDragOver"
             @drop="handleCanvasDrop">
          <!-- 对齐辅助线 -->
          <div v-if="alignmentLines.horizontal" 
               class="alignment-line alignment-line-h"
               :style="{ top: alignmentLines.horizontal + 'px' }"></div>
          <div v-if="alignmentLines.vertical" 
               class="alignment-line alignment-line-v"
               :style="{ left: alignmentLines.vertical + 'px' }"></div>
               
          <element-wrapper
            v-for="(item, index) in components"
            :key="item.id"
            :id="item.id"
            :type="item.type"
            :component-props="item.props"
            :x="item.x"
            :y="item.y"
            :width="item.width"
            :height="item.height"
            :selected="item.selected"
            :z-index="item.zIndex"
            :is-container="item.isContainer"
            :has-children="item.children && item.children.length > 0"
            :wrapper-children="item.children"
            @update:x="(val) => updateComponentProp(item.id, 'x', val)"
            @update:y="(val) => updateComponentProp(item.id, 'y', val)"
            @update:width="(val) => updateComponentProp(item.id, 'width', val)"
            @update:height="(val) => updateComponentProp(item.id, 'height', val)"
            @update:selected="(val) => updateComponentProp(item.id, 'selected', val)"
            @select="selectComponent"
            @remove="removeComponent"
            @drag-start="(e) => handleDragStart(item, e)"
            @drag="(e) => handleDrag(item, e)"
            @drag-end="(e) => handleDragEnd(item, e)"
            @resize-start="(e) => handleResizeStart(item, e)"
            @resize="(e) => handleResize(item, e)"
            @resize-end="(e) => handleResizeEnd(item, e)"
            @add-child="(data) => addChildComponent(item.id, data)"
          />
        </div>
      </div>
      
      <div class="property-panel" v-if="selectedComponent">
        <div class="property-title">属性设置</div>
        
        <div class="property-group">
          <div class="group-title">位置和大小</div>
          <div class="property-row">
            <div class="property-label">X 坐标</div>
            <el-input-number v-model="selectedComponent.x" :min="0" size="small" style="width: 100%"></el-input-number>
          </div>
          <div class="property-row">
            <div class="property-label">Y 坐标</div>
            <el-input-number v-model="selectedComponent.y" :min="0" size="small" style="width: 100%"></el-input-number>
          </div>
          <div class="property-row">
            <div class="property-label">宽度</div>
            <el-input-number v-model="selectedComponent.width" :min="30" size="small" style="width: 100%"></el-input-number>
          </div>
          <div class="property-row">
            <div class="property-label">高度</div>
            <el-input-number v-model="selectedComponent.height" :min="20" size="small" style="width: 100%"></el-input-number>
          </div>
          <div class="property-row">
            <div class="property-label">层级</div>
            <el-slider v-model="selectedComponent.zIndex" :min="1" :max="100" show-input></el-slider>
          </div>
        </div>
        
        <div class="property-group">
          <div class="group-title">组件属性</div>
          
          <!-- 按钮属性 -->
          <template v-if="selectedComponent.type === 'button'">
            <div class="property-row">
              <div class="property-label">按钮文本</div>
              <el-input v-model="selectedComponent.props.text" size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">按钮类型</div>
              <el-select v-model="selectedComponent.props.type" size="small" style="width: 100%">
                <el-option label="默认" value=""></el-option>
                <el-option label="主要" value="primary"></el-option>
                <el-option label="成功" value="success"></el-option>
                <el-option label="警告" value="warning"></el-option>
                <el-option label="危险" value="danger"></el-option>
                <el-option label="信息" value="info"></el-option>
              </el-select>
            </div>
          </template>
          
          <!-- 输入框属性 -->
          <template v-if="selectedComponent.type === 'input'">
            <div class="property-row">
              <div class="property-label">占位文本</div>
              <el-input v-model="selectedComponent.props.placeholder" size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">默认值</div>
              <el-input v-model="selectedComponent.props.value" size="small"></el-input>
            </div>
          </template>
          
          <!-- 卡片属性 -->
          <template v-if="selectedComponent.type === 'card'">
            <div class="property-row">
              <div class="property-label">标题</div>
              <el-input v-model="selectedComponent.props.title" size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">内容</div>
              <el-input v-model="selectedComponent.props.content" type="textarea"  size="small"></el-input>
            </div>
          </template>
          
          <!-- 进度条属性 -->
          <template v-if="selectedComponent.type === 'progress'">
            <div class="property-row">
              <div class="property-label">进度值</div>
              <el-slider v-model="selectedComponent.props.percentage" :min="0" :max="100"></el-slider>
            </div>
          </template>
          
          <!-- 标签属性 -->
          <template v-if="selectedComponent.type === 'tag'">
            <div class="property-row">
              <div class="property-label">内容</div>
              <el-input v-model="selectedComponent.props.content" size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">类型</div>
              <el-select v-model="selectedComponent.props.type" size="small" style="width: 100%">
                <el-option label="默认" value=""></el-option>
                <el-option label="成功" value="success"></el-option>
                <el-option label="警告" value="warning"></el-option>
                <el-option label="危险" value="danger"></el-option>
                <el-option label="信息" value="info"></el-option>
              </el-select>
            </div>
          </template>
          
          <!-- 警告属性 -->
          <template v-if="selectedComponent.type === 'alert'">
            <div class="property-row">
              <div class="property-label">标题</div>
              <el-input v-model="selectedComponent.props.title" size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">类型</div>
              <el-select v-model="selectedComponent.props.type" size="small" style="width: 100%">
                <el-option label="成功" value="success"></el-option>
                <el-option label="警告" value="warning"></el-option>
                <el-option label="危险" value="error"></el-option>
                <el-option label="信息" value="info"></el-option>
              </el-select>
            </div>
          </template>
          
          <!-- 容器属性 -->
          <template v-if="selectedComponent.type === 'container'">
            <div class="property-row">
              <div class="property-label">标题</div>
              <el-input v-model="selectedComponent.props.title" size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">描述</div>
              <el-input v-model="selectedComponent.props.description" type="textarea"  size="small"></el-input>
            </div>
            <div class="property-row">
              <div class="property-label">子组件数量</div>
              <el-tag type="info">{{ selectedComponent.children ? selectedComponent.children.length : 0 }}</el-tag>
            </div>
          </template>
        </div>
        
        <div class="property-group">
          <div class="group-title">操作</div>
          <el-button type="danger" size="small" style="width: 100%" @click="removeComponent(selectedComponent.id)">删除组件</el-button>
        </div>
      </div>
    </div>
    
    <div class="event-log">
      <div class="log-title">事件日志</div>
      <div class="log-entry" v-for="(log, index) in eventLogs" :key="index">
        {{ log }}
      </div>
    </div>
  </div>

  <!-- 引入我们的ElementWrapper组件 -->
  <script src="./element-wrapper.js"></script>
  
  <script>
    const { createApp, ref, reactive, computed, onMounted } = Vue;
    
    const app = createApp({
      setup() {
        // 画布引用
        const canvas = ref(null);
        
        // 组件列表
        const components = ref([]);
        
        // 事件日志
        const eventLogs = ref([]);
        const maxLogs = 50;
        
        // 选中的组件
        const selectedComponent = computed(() => {
          return components.value.find(comp => comp.selected) || null;
        });
        
        // 生成唯一ID
        const generateId = () => `comp_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
        
        // 添加组件
        const addComponent = (type) => {
          const canvasRect = canvas.value.getBoundingClientRect();
          
          // 计算随机位置，确保在画布内
          const x = Math.random() * (canvasRect.width - 200) + 20;
          const y = Math.random() * (canvasRect.height - 100) + 20;
          
          // 使用通用函数创建组件
          createComponentAtPosition(type, x, y);
        };
        
        // 添加示例组件
        const addDemoComponents = () => {
          // 添加容器
          //const containerId = generateId();
          /*components.value.push({
            id: containerId,
            type: 'container',
            x: 300,
            y: 300,
            width: 400,
            height: 250,
            selected: false,
            zIndex: 5,
            props: {
              title: '拖拽容器',
              description: '将组件拖拽到此容器中'
            },
            isContainer: true,
            children: []
          });       
          logEvent('add', { message: '添加了示例组件' });
          */
        };
        
        // 选择组件
        const selectComponent = (id) => {
          components.value.forEach(comp => {
            comp.selected = comp.id === id;
          });
          
          // 将选中的组件置于顶层
          const selectedComp = components.value.find(comp => comp.id === id);
          if (selectedComp) {
            const maxZIndex = Math.max(...components.value.map(c => c.zIndex));
            if (selectedComp.zIndex < maxZIndex) {
              selectedComp.zIndex = maxZIndex + 1;
            }
          }
        };
        
        // 取消选择所有组件
        const deselectAll = (event) => {
          if (event.target === canvas.value) {
            components.value.forEach(comp => {
              comp.selected = false;
            });
          }
        };
        
        // 更新组件属性
        const updateComponentProp = (id, prop, value) => {
          const index = components.value.findIndex(comp => comp.id === id);
          if (index !== -1) {
            components.value[index][prop] = value;
          }
        };
        
        // 删除组件
        const removeComponent = (id) => {
          const index = components.value.findIndex(comp => comp.id === id);
          if (index !== -1) {
            const component = components.value[index];
            components.value.splice(index, 1);
            logEvent('remove', component);
          }
        };
        
        // 清空画布
        const clearCanvas = () => {
          if (components.value.length > 0) {
            if (confirm('确定要清空画布吗？')) {
              components.value = [];
              logEvent('clear', { message: '清空了画布' });
            }
          }
        };
        
        // 对齐辅助线状态
        const alignmentLines = ref({
          horizontal: null,
          vertical: null
        });
        const alignThreshold = 5; // 对齐阈值（像素）
        
        // 处理拖拽开始
        const handleDragStart = (component, event) => {
          // 清除对齐线
          clearAlignmentLines();
          logEvent('drag-start', component, event);
        };
        
        // 处理拖拽中
        const handleDrag = (component, event) => {
          // 检查对齐
          checkAlignment(component);
          logEvent('drag', component, event);
        };
        
        // 处理拖拽结束
        const handleDragEnd = (component, event) => {
          // 清除对齐线
          clearAlignmentLines();
          logEvent('drag-end', component, event);
        };
        
        // 处理缩放开始
        const handleResizeStart = (component, event) => {
          // 清除对齐线
          clearAlignmentLines();
          logEvent('resize-start', component, event);
        };
        
        // 处理缩放中
        const handleResize = (component, event) => {
          // 检查对齐
          checkAlignment(component);
          logEvent('resize', component, event);
        };
        
        // 处理缩放结束
        const handleResizeEnd = (component, event) => {
          // 清除对齐线
          clearAlignmentLines();
          logEvent('resize-end', component, event);
        };
        
        // 检查对齐
        const checkAlignment = (currentComponent) => {
          // 清除现有对齐线
          clearAlignmentLines();
          
          // 如果没有其他组件，直接返回
          if (components.value.length <= 1) return;
          
          // 当前组件的边界
          const current = {
            left: currentComponent.x,
            right: currentComponent.x + currentComponent.width,
            top: currentComponent.y,
            bottom: currentComponent.y + currentComponent.height,
            centerX: currentComponent.x + currentComponent.width / 2,
            centerY: currentComponent.y + currentComponent.height / 2
          };
          
          // 遍历其他组件检查对齐
          components.value.forEach(comp => {
            if (comp.id === currentComponent.id) return;
            
            const other = {
              left: comp.x,
              right: comp.x + comp.width,
              top: comp.y,
              bottom: comp.y + comp.height,
              centerX: comp.x + comp.width / 2,
              centerY: comp.y + comp.height / 2
            };
            
            // 检查水平对齐
            // 左边缘对齐
            if (Math.abs(current.left - other.left) < alignThreshold) {
              alignmentLines.value.vertical = other.left;
              updateComponentProp(currentComponent.id, 'x', other.left);
            }
            // 右边缘对齐
            else if (Math.abs(current.right - other.right) < alignThreshold) {
              alignmentLines.value.vertical = other.right;
              updateComponentProp(currentComponent.id, 'x', other.right - currentComponent.width);
            }
            // 左边缘对右边缘
            else if (Math.abs(current.left - other.right) < alignThreshold) {
              alignmentLines.value.vertical = other.right;
              updateComponentProp(currentComponent.id, 'x', other.right);
            }
            // 右边缘对左边缘
            else if (Math.abs(current.right - other.left) < alignThreshold) {
              alignmentLines.value.vertical = other.left;
              updateComponentProp(currentComponent.id, 'x', other.left - currentComponent.width);
            }
            // 中心对齐
            else if (Math.abs(current.centerX - other.centerX) < alignThreshold) {
              alignmentLines.value.vertical = other.centerX;
              updateComponentProp(currentComponent.id, 'x', other.centerX - currentComponent.width / 2);
            }
            
            // 检查垂直对齐
            // 上边缘对齐
            if (Math.abs(current.top - other.top) < alignThreshold) {
              alignmentLines.value.horizontal = other.top;
              updateComponentProp(currentComponent.id, 'y', other.top);
            }
            // 下边缘对齐
            else if (Math.abs(current.bottom - other.bottom) < alignThreshold) {
              alignmentLines.value.horizontal = other.bottom;
              updateComponentProp(currentComponent.id, 'y', other.bottom - currentComponent.height);
            }
            // 上边缘对下边缘
            else if (Math.abs(current.top - other.bottom) < alignThreshold) {
              alignmentLines.value.horizontal = other.bottom;
              updateComponentProp(currentComponent.id, 'y', other.bottom);
            }
            // 下边缘对上边缘
            else if (Math.abs(current.bottom - other.top) < alignThreshold) {
              alignmentLines.value.horizontal = other.top;
              updateComponentProp(currentComponent.id, 'y', other.top - currentComponent.height);
            }
            // 中心对齐
            else if (Math.abs(current.centerY - other.centerY) < alignThreshold) {
              alignmentLines.value.horizontal = other.centerY;
              updateComponentProp(currentComponent.id, 'y', other.centerY - currentComponent.height / 2);
            }
          });
        };
        
        // 清除对齐线
        const clearAlignmentLines = () => {
          alignmentLines.value.horizontal = null;
          alignmentLines.value.vertical = null;
        };
        
        // 处理组件拖拽开始
        const handleComponentDragStart = (event, componentType) => {
          // 设置拖拽数据
          event.dataTransfer.setData('componentType', componentType);
          event.dataTransfer.effectAllowed = 'copy';
          
          // 设置拖拽图像（可选）
          const dragImage = document.createElement('div');
          dragImage.textContent = componentType;
          dragImage.style.padding = '10px';
          dragImage.style.background = '#409EFF';
          dragImage.style.color = 'white';
          dragImage.style.borderRadius = '4px';
          dragImage.style.position = 'absolute';
          dragImage.style.top = '-1000px';
          document.body.appendChild(dragImage);
          
          event.dataTransfer.setDragImage(dragImage, 0, 0);
          
          // 延迟移除拖拽图像
          setTimeout(() => {
            document.body.removeChild(dragImage);
          }, 0);
          
          logEvent('drag-start-from-library', { type: componentType });
        };
        
        // 处理画布拖拽经过
        const handleCanvasDragOver = (event) => {
          // 阻止默认行为以允许放置
          event.preventDefault();
          event.dataTransfer.dropEffect = 'copy';
        };
        
        // 处理画布拖拽放置
        const handleCanvasDrop = (event) => {
          // 阻止默认行为
          event.preventDefault();
          event.stopPropagation();
          console.log('drop on canvas');
          // 获取拖拽的组件类型
          const componentType = event.dataTransfer.getData('componentType');
          if (!componentType) return;
          
          // 获取放置位置（相对于画布）
          const canvasRect = canvas.value.getBoundingClientRect();
          const x = event.clientX - canvasRect.left;
          const y = event.clientY - canvasRect.top;
          
          // 创建新组件
          createComponentAtPosition(componentType, x, y);
          
          logEvent('drop-on-canvas', { 
            type: componentType, 
            position: { x: Math.round(x), y: Math.round(y) } 
          });
        };
        
        // 在指定位置创建组件
        const createComponentAtPosition = (type, x, y) => {
          const id = generateId();
          
          // 根据类型设置默认属性和尺寸
          let width, height, props={};
          let isContainer = false;
          let children = [];
           
          
          // 取消选择其他组件
          components.value.forEach(comp => {
            comp.selected = false;
          });
          
          // 创建组件对象
          const component = {
            id,
            type,
            x,
            y,
            width,
            height,
            selected: true,
            zIndex: components.value.length + 1,
            props,
            isContainer,
            children
          };
          
          // 添加到组件列表
          components.value.push(component);
          
          // 记录日志
          logEvent('add', component);
          
          return component;
        };
        
        // 添加子组件到容器
        const addChildComponent = (containerId, data) => {
          // 查找容器组件
          const containerIndex = components.value.findIndex(comp => comp.id === containerId);
          if (containerIndex === -1) return;
          
          const container = components.value[containerIndex];
          logEvent('container', { message: JSON.stringify(container) });
          if (!container.isContainer) return;
          
          // 确保容器有children数组
          if (!container.children) {
            container.children = [];
          }
          container.props.test="测试";
          container.props.title=" container.props.title";
          // 创建子组件
          const childId = generateId();
          const childComponent = {
            id: childId,
            type: data.type,
            x: data.x || 10,
            y: data.y || 10,
            width: data.width || 100,
            height: data.height || 40,
            props: data.props || {},
            parentId: containerId
          };
    
          // 添加到容器的子组件列表
          container.children.push(childComponent);
          
          // 记录日志
          logEvent('add-child', { 
            message: `添加了${data.type}组件到容器${container.props.title || containerId}中`
          });
        };
        
        // 记录事件
        const logEvent = (eventName, component, eventData) => {
          const timestamp = new Date().toLocaleTimeString();
          let logMessage = `[${timestamp}] ${eventName}`;
          
          if (component) {
            if (component.type) {
              logMessage += ` - ${component.type}`;
              
              if (eventName === 'drag' || eventName === 'drag-end') {
                logMessage += ` 位置: (${Math.round(component.x)}, ${Math.round(component.y)})`;
              } else if (eventName === 'resize' || eventName === 'resize-end') {
                logMessage += ` 尺寸: ${Math.round(component.width)}x${Math.round(component.height)}`;
                if (eventData && eventData.direction) {
                  logMessage += ` 方向: ${eventData.direction}`;
                }
              }
            } else if (component.message) {
              logMessage += ` - ${component.message}`;
            }
          }
          
          eventLogs.value.unshift(logMessage);
          
          // 限制日志数量
          if (eventLogs.value.length > maxLogs) {
            eventLogs.value = eventLogs.value.slice(0, maxLogs);
          }
        };
        
        // 初始化
        onMounted(() => {
          // 添加一些示例组件
          setTimeout(() => {
            addDemoComponents();
          }, 100);
        });
        
        return {
          canvas,
          components,
          eventLogs,
          selectedComponent,
          alignmentLines,
          addComponent,
          addDemoComponents,
          selectComponent,
          deselectAll,
          updateComponentProp,
          removeComponent,
          clearCanvas,
          logEvent,
          handleDragStart,
          handleDrag,
          handleDragEnd,
          handleResizeStart,
          handleResize,
          handleResizeEnd,
          addChildComponent,
          handleComponentDragStart,
          handleCanvasDragOver,
          handleCanvasDrop,
          createComponentAtPosition
        };
      }
    });
      app.component("element-wrapper",ElementWrapper)

    // 使用Element Plus
    app.use(ElementPlus);
  // 注册ElementPlus组件
  // for (const [key, component] of Object.entries(ElementPlus)) {
 //    if(key.startsWith('El')){
  //   app.component(key, component)
   //  }
 //  }

  // 注册图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  app.mount('#app');
  </script>